<template>
	<view class="container">
		<scroll-view class="table" scroll-x="true">
			<view class="table-header">
				<text class="table-cell">房间号</text>
				<text class="table-cell">充值金额(元)</text>

				<text class="table-cell">充值时间</text>
				<text class="table-cell">领取状态</text>
			</view>
			<view class="table-row" v-for="(item, index) in data1" :key="index">
				<text class="table-cell">{{ item.SS_MC }}</text>
				<text class="table-cell">{{ item.money }}</text>
				<text class="table-cell">{{ convertTime (item.updatedAt)}}</text>
				<text class="table-cell">{{ getStatusText(item.qc_state) }}</text>
			</view>
		</scroll-view>
		<view class="bottom-button" @click="reback">一键领取</view>
	</view>
	</view>
</template>

<script>
	import SearchDateRange from '@/component/SearchDateRange.vue';
	import {
		ajax
	} from '../../utils/request.js';

	export default {
		components: {
			SearchDateRange
		},
		data() {
			return {
				data1: [],
				data: [],
				formattedTime: '',
				searchValue: '',
				currentPage: 1,
				itemsPerPage: 10,
				start: '',
				end: '',

				UUID: '',
				device: {}, //设备信息
				title: '', //加载标题
				serviceu: "", // 服务地址
				txdu: "", // 发送数据
				rxdu: "", // 接收数据
				serviceId: "", //服务id
				characteristicId: "", //特征值id
				hex: "", //蓝牙返回的数据
			};
		},
		computed: {
			totalPages() {
				return Math.ceil(this.data.length / this.itemsPerPage);
			},
			paginatedData() {
				const start = (this.currentPage - 1) * this.itemsPerPage;
				const end = start + this.itemsPerPage;
				return this.data.slice(start, end);
			}
		},
		onShow() {
			this.start = null; // 初始化时间参数为 null
			this.end = null;
			this.fetchFormData();
		},
		methods: {
			handleSearch(dateRange) {
				// 假设 dateRange 对象包含 start 和 end 属性
				this.start = dateRange.start || null; // 如果没有开始时间，则设为 null
				this.end = dateRange.end || null; // 如果没有结束时间，则设为 null

				// 重新获取数据
				this.fetchFormData();
			},
			// formatTimeAndSort() {
			//   if (this.data && this.data.length > 0) {
			//     this.data.forEach((item) => {
			//       // 状态处理
			//       if (item.payState == 0) {
			//         item.payState = "充值失败";
			//       } else if (item.payState == 1) {
			//         item.payState = "充值成功";
			//       } else {
			//         item.payState = "系统错误";
			//       }
			//       // 时间处理
			//       const date = new Date(item.createdAt); // 假设item.createdAt是时间戳或日期字符串
			//       const formattedTime = date.toLocaleString('zh-CN', {
			//         hour12: false, // 使用 24 小时制
			//         timeZone: 'Asia/Shanghai', // 设置时区
			//       });
			//       item.displayTime = formattedTime;
			//     });

			//     // 根据displayTime进行排序，最新日期排前面
			//     this.data.sort((a, b) => {
			//       const dateA = new Date(a.displayTime);
			//       const dateB = new Date(b.displayTime);
			//       return dateB - dateA; // 降序排列
			//     });

			//     // 重置当前页码为第一页
			//     this.currentPage = 1;
			//   }
			// },

			fetchFormData() {
				let postData = {
					userId: uni.getStorageSync('userId'),
				};

				// 检查是否有时间范围，并添加到postData中
				if (this.start && this.end) {
					postData.strTime = this.start;
					postData.endTime = this.end;
				}

				ajax('/api/meter/getcoldwaterrechargerecord', 'POST', postData)
					.then((data) => {
						console.log("成功补贴数据:", data);
						this.data1 = data.data.coldwaterrechargerecord;
						console.log("补贴数据有:", this.data1);
					})
					.catch((error) => {
						console.error("请求失败:", error);
					});
			},
			getStatusText(state) {
				// console.log("数据是:", this.data1.state)
				if (state == 1) {
					return "已领取";
				} else if (state == 0) {
					return "未领取";
				} else {
					return "未知";
				}
			},
			convertTime(utcTimeString) {
				// 创建一个新的 Date 对象，并设置时区为UTC
				const utcDate = new Date(utcTimeString);

				// 获取本地时区与UTC之间的差异，以分钟为单位
				const offsetMinutes = utcDate.getTimezoneOffset();

				// 计算本地时间
				const localTime = new Date(utcDate.getTime() + (offsetMinutes * 60000));

				// 格式化时间
				const formattedTime = localTime.toLocaleString();

				return formattedTime;
			},
			reback() {
				setTimeout(() => {
					uni.showModal({
						title: '领取成功',

						success: function(res) {
							if (res.confirm) {
								// 成功后导航回上一页
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								// 失败后显示提示
								uni.showToast({
									title: '领取失败',
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				}, 1000); // 延迟1000毫秒后显示模态对话框
			},
		},
		onLoad() {

			//获取设备信息
			this.device = uni.getStorageSync("device");
			//判断设备
			if (uni.getSystemInfoSync().platform === 'ios') {
				console.log("ios用户");
				this.title = "正在搜索设备";
				uni.showLoading({
					title: this.title,
					mask: true
				});
				// 获取设备ID
				this.getBluetoothDeviceIdByName(this.device.BluetoothName)
					.then(deviceId => {
						console.log('找到设备ID:', deviceId);
						this.UUID = deviceId;
						console.log('uuid', this.UUID)
						this.title = "正在连接蓝牙..."
						// 开始连接蓝牙
						this.connect();
					})
					.catch(error => {
						console.error('错误:', error.message);
					});
			} else {
				this.UUID = this.device.UUID;
				console.log('uuid', this.UUID)
				this.title = "正在连接蓝牙..."
				uni.showLoading({
					title: this.title,
					mask: true
				});
				// 开始连接蓝牙
				this.connect();
			}
		},

	};
</script>

<style scoped>
	.container {
		padding: 10px;
	}


	.title {
		font-size: 18px;
		font-weight: bold;
	}


	.table-header,
	.table-row {
		width: 200%;
		height: 50px;
		display: flex;

		align-items: center;
		border-bottom: 0.1px solid #e3e3e3;
		white-space: nowrap;
	}

	.table-cell {
		width: 50%;
		flex: 1;
		text-align: center;
		/* padding: s0px 10px; */
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
	}

	.pagination-button {
		padding: 5px 10px;
		color: black;
		border: .1px solid #e3e3e3;
		border-radius: 5px;
		cursor: pointer;
	}

	.pagination-info {
		margin: 0 10px;
	}

	.bottom-button {
		position: fixed;
		/* 按钮固定在底部 */
		bottom: 0;
		/* 按钮在底部 */
		left: 0;
		right: 0;
		background-color: #2ba245;
		color: #ffffff;
		padding: 10px;
		text-align: center;
	}
</style>